import React from 'react';
import { TreeSelect } from 'antd';

class Tree extends React.Component {

    state = {
        editorContent: ''
    }

    constructor(props, context) {
        super(props, context);

        if (this.props.value) {
            this.state = {
                editorContent: this.props.value
            };
        }
    }

    componentDidMount() {
        const elem = this.refs.editorElem
        this.editor = new E(elem)
        // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
        this.editor.customConfig.onchange = html => {
            this.setState({
                editorContent: html
            })
            this.triggerChange(html);
        }
        this.editor.create()

        if (this.state.editorContent) {
            this.editor.txt.html(this.state.editorContent);
        }
    }

    triggerChange(value) {
        const onChange = this.props.onChange;
        if (onChange) {
            onChange(value);
        }
    }

    render() {
        return (
            <div>
                <div ref="editorElem" {...this.props} />
            </div>
        );
    }
}

export { Editor };